<template>
  <div id="app">
    <h1>虚拟列表示例</h1>
    <VirtualLists :items="items" :itemHeight="0" :itemComponent="ItemComponent">
      <template #default="">
        <div class="custom-item">

          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
              <van-cell v-for="(item, index) in listData" :key="index" class="list" "
                style=" width: 110%;border-top: 1px solid #e8e8e8; ">
                <!-- 图片 -->
              <div style=" float: left; width: 22%;height:90px;">
                <img src="" v-error v-img-lazy="item.image" alt="" class="left" style="width: 100%; ">
                <!-- <img src="../../assets/13.jpg" alt="" style="width: 100%;"> -->
              </div>
        <!-- 内容 -->
        <div class="right" style=" float: left;margin-left: 2%; width: 70%;height: 100%;">
          <div class="mock"
            style="float: left; width: 86%;;margin-left: 1%; text-align:left;white-space: pre-wrap;font-size: 16px;;color: black;">
            {{ item.title }}
          </div>

          <div class="button" style="float: left; margin-left: 2%;margin-top: 10%; width: 100%;">
            <div style="width: 38%;float: left;margin-right: 10%;margin-left: -9%;">
              <span style="margin-right: 7%;">{{ item.channel_name }}</span>
              <span>{{ item.date_str }}</span>
            </div>

            <div style="width:50%;float: left;margin-left: 24px;">
              <span style="float: left;margin-right:16px;">
                阅读
                {{ (item.view_times * 0.001).toFixed(1) }}万
              </span>
              <span style="float: left;">赞{{ (item.news_id * 0.001).toFixed(0) }}</span>
            </div>

          </div>

        </div>
        </van-cell>
        </van-list>
        </van-pull-refresh>
  </div>
</template>
</VirtualLists>
</div>
</template>

<script setup lang="ts">

const items = Array.from({ length: 50 }, (v, k) => ({

}));



import VirtualLists from '../../compentents/VirtualLists/index.vue';

import { ref } from 'vue'
import http from '@/http/axios'

const listData = ref([])
// https://www.chunyuyisheng.com/cooperation/wap/health_news/
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const pagecode = ref(0)
// 请求接口
async function GetList() {
  const resp = await http.get('/static/cooperation/wap/health_news/', {
    params: {
      from_wx_mini: '1',
      page: pagecode.value,
      partner: 'chunyu_wap_mini',
      release_time: '2020-04-22%2010%3A30%3A00',
      channel_id: '0'
    }
  })
  console.log(resp.data.content_list);
  listData.value = [...listData.value, ...resp.data.content_list]
}
GetList()
// 跳转详情并带传参

// 上拉刷新下拉加载
const onLoad = () => {
  setTimeout(() => {
    if (refreshing.value) {
      listData.value = [];
      refreshing.value = false;
    }
    for (let i = 0; i < 1; i++) {
      listData.value.push(listData.value.length + 1);
      GetList()
    }
    loading.value = false;
    if (listData.value.length >= 1) {
      pagecode.value++
    }
  }, 1000);
};

const onRefresh = () => {
  // 清空列表数据

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  pagecode.value++
  onLoad()
};

const ItemComponent = {
  template: '<div class="custom-item"><slot></slot></div>',
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;

  margin-top: 60px;
}

.custom-item {
  line-height: 80px;
  /* 与 itemHeight 相同 */
  padding: 0 10px;
}
</style>